<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Toolbox</title>
    
    <!-- meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <!-- meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>

    <h1>Meteora.Toolbox</h1>

    <div class="instructions">
      Click on the box below. This control features a floating, draggable div that
      can be used to contain custom HTML elements. This is a sort of low-level control
      that requires special customization.
    </div>

    <div id="toolbox_test" class="demo-block">Click here.</div>

    <script type="text/javascript">
      
      Meteora.uses('Meteora.Toolbox');

      Meteora.onStart(
        function() {

          var el = $('toolbox_test');

          el.store(
            'toolbox',
            new Toolbox(
              Widget.div(null, [
                Widget.div({
                  'style': {
                    'border':   '1px dashed #333',
                    'padding':  '1em',
                    'cursor':   'move'
                  }
                },
                'This is a empty div that does nothing. It can be dragged and moved freely.'
                )
              ])
            )
          );

          el.addEvent(
            'click',
            function(e) {
              var e = new Event(e);
              var toolbox = this.retrieve('toolbox');
              toolbox.show(e);
              toolbox.moveTo(e.page.y, e.page.x);
            }
          );

        }
      );
    </script>

  </body>
</html>
